<template>
  <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
  <div class="box">
    <div class="profit">
      <div class="profit_left">
        <div class="wp">
          <div>今日收益：</div>
          <span v-if="this.$store.state.todayprofit >= 0" style="color:red;">{{
            towNumber(this.$store.state.todayprofit * 100) + '%'
          }}</span>
          <span
            v-if="this.$store.state.todayprofit < 0"
            style="color:#06e108;"
            >{{ towNumber(this.$store.state.todayprofit * 100) + '%' }}</span
          >
        </div>
        <div class="wp">
          <div>近一周收益：</div>
          <span v-if="this.$store.state.weekprofit >= 0" style="color:red;">{{
            towNumber(this.$store.state.weekprofit * 100) + '%'
          }}</span
          ><span
            v-if="this.$store.state.weekprofit < 0"
            style="color:#06e108;"
            >{{ towNumber(this.$store.state.weekprofit * 100) + '%' }}</span
          ><span v-if="this.$store.state.weekprofit === '-'">-</span>
        </div>
        <div class="wp">
          <div>近一月收益：</div>
          <span v-if="this.$store.state.monthprofit >= 0" style="color:red;">{{
            towNumber(this.$store.state.monthprofit * 100) + '%'
          }}</span
          ><span
            v-if="this.$store.state.monthprofit < 0"
            style="color:#06e108;"
            >{{ towNumber(this.$store.state.monthprofit * 100) + '%' }}</span
          ><span v-if="this.$store.state.monthprofit === '-'">-</span>
        </div>
      </div>
      <div class="profit_right">
        <div class="wp">
          <div>总收益：</div>
          <span v-if="this.$store.state.totalprofit >= 0" style="color:red;">{{
            towNumber(this.$store.state.totalprofit) + '%'
          }}</span>
          <span
            v-if="this.$store.state.totalprofit < 0"
            style="color:#06e108;"
            >{{ towNumber(this.$store.state.totalprofit) + '%' }}</span
          >
        </div>
        <div class="wp">
          <div>仓位占比：</div>
          <span style="color:yellow"
            >{{
              towNumber(
                (this.$store.state.accountdatas[this.$store.state.INDEX]
                  .stock_value /
                  this.$store.state.accountdatas[this.$store.state.INDEX]
                    .total_asset) *
                  100
              )
            }}%</span
          >
        </div>
      </div>
    </div>
    <!-- <div style="text-align:center" v-if="!this.show">
      <van-loading size="24px">加载中...</van-loading>
    </div> -->
    <div id="main"></div>
    <!-- <div class="briefIntroduction" v-if="this.show">
      <img class="briefIntroductionPhoto" :src="this.img" alt="" />
    </div> -->
  </div>
</template>
<script>
// 导入echarts
import * as Echarts from 'echarts'
import { websocket } from '../assets/js/websocketHQ.js'
import Vue from 'vue'
import { Loading } from 'vant'
// import _ from 'lodash'
import {
  socketsendgetfollowings,
  socketsendshare1
} from '../assets/js/websocketTest.js'
Vue.use(Loading)
export default {
  data() {
    return {
      todayprofit: '1',
      weekprofit: '1',
      show: false
    }
  },
  // computed: {
  //   img() {
  //     return require('../assets/img/' +
  //       this.$store.state.followaccount[this.$store.state.INDEX] +
  //       '.png')
  //   }
  // },
  created() {},
  // 此时页面上的元素已经被渲染完毕了
  methods: {
    // 小数点后保留两位的函数
    towNumber(val) {
      return Number(val).toFixed(2)
    },
    getCurrentTime() {
      // 获取当前时间并打印
      var data = new Date()
      this.value =
        data.getFullYear() +
        '-' +
        (data.getMonth() < 9
          ? '0' + (data.getMonth() + 1)
          : data.getMonth() + 1) +
        '-' +
        (data.getDate() <= 9 ? '0' + data.getDate() : data.getDate())
      console.log(this.value)
      this.$store.state.todayTime = this.value
    },
    profit() {
      if (
        this.$store.state.shareTIME.indexOf(this.$store.state.todayTime) > -1
      ) {
        var today = this.$store.state.shareNET.length - 2
        this.$store.state.todayprofit =
          (this.towNumber(
            this.$store.state.accountdatas[this.$store.state.INDEX]
              .total_asset / 10000
          ) -
            this.$store.state.shareNET[today]) /
          this.$store.state.shareNET[today]
      } else {
        var today1 = this.$store.state.shareNET.length - 1
        this.$store.state.todayprofit =
          (this.towNumber(
            this.$store.state.accountdatas[this.$store.state.INDEX]
              .total_asset / 10000
          ) -
            this.$store.state.shareNET[today1]) /
          this.$store.state.shareNET[today1]
      }
      var week = this.$store.state.shareNET.length - 5
      if (week >= 0) {
        this.$store.state.weekprofit =
          (this.towNumber(
            this.$store.state.accountdatas[this.$store.state.INDEX]
              .total_asset / 10000
          ) -
            this.$store.state.shareNET[week]) /
          this.$store.state.shareNET[week]
      } else {
        this.$store.state.weekprofit = '-'
      }
      var month = this.$store.state.shareNET.length - 22
      if (month >= 0) {
        this.$store.state.monthprofit =
          (this.towNumber(
            this.$store.state.accountdatas[this.$store.state.INDEX]
              .total_asset / 10000
          ) -
            this.$store.state.shareNET[month]) /
          this.$store.state.shareNET[month]
      } else {
        this.$store.state.monthprofit = '-'
      }
      this.$store.state.totalprofit =
        ((this.towNumber(
          this.$store.state.accountdatas[this.$store.state.INDEX].total_asset /
            10000
        ) -
          100) /
          100) *
        100
    },
    flashMyChart() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = Echarts.init(document.getElementById('main'))
      // 获取数据
      // ----------
      // 准备数据和配置项
      // 合并
      // const result = _.merge(res.data,this.options)
      this.getCurrentTime()
      this.$store.state.dataTime = []
      this.$store.state.dataNet = [0]
      this.$store.state.dataNet1 = [0]
      this.$store.state.NET1 = [0]
      if (
        this.$store.state.shareTIME.indexOf(this.$store.state.todayTime) > -1
      ) {
        this.$store.state.dataTime.push(...this.$store.state.shareTIME)
        this.$store.state.dataNet.push(...this.$store.state.shareNET)
        for (let i = 0; i < this.$store.state.shareNET.length; i++) {
          this.$store.state.NET1[i] = this.towNumber(
            this.$store.state.shareNET[i] - 100
          )
        }
        this.$store.state.dataNet1.push(...this.$store.state.NET1)
      } else {
        this.$store.state.dataTime.push(
          this.$store.state.shareTIME[0],
          ...this.$store.state.shareTIME,
          this.$store.state.todayTime
        )
        this.$store.state.dataNet.push(
          ...this.$store.state.shareNET,
          this.towNumber(
            this.$store.state.accountdatas[this.$store.state.INDEX]
              .total_asset / 10000
          )
        )
        for (let i = 0; i < this.$store.state.shareNET.length; i++) {
          this.$store.state.NET1[i] = this.towNumber(
            this.$store.state.shareNET[i] - 100
          )
        }
        this.$store.state.dataNet1.push(
          ...this.$store.state.NET1,
          this.towNumber(
            this.$store.state.accountdatas[this.$store.state.INDEX]
              .total_asset /
              10000 -
              100
          )
        )
      }
      var option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['账户收益率(%)'],
          textStyle: {
            color: '#ffffff'
          }
        },
        xAxis: {
          axisLabel: {
            textStyle: {
              color: '#ffffff'
            }
          },
          data: this.$store.state.dataTime
        },
        yAxis: {
          axisLabel: {
            margin: 5,
            textStyle: {
              color: '#ffffff'
            }
          }
          // min: Math.min(...this.$store.state.dataNet),
          // max: this.towNumber(Math.max(...this.$store.state.dataNet))
        },
        series: [
          {
            name: '账户收益率(%)',
            type: 'line',
            // data: this.$store.state.dataNet,
            data: this.$store.state.dataNet1,
            symbol: 'circle', // 折线拐点去掉圆点
            itemStyle: {
              normal: {
                color: '#D53F29',
                lineStyle: {
                  color: '#D53F29'
                }
              }
            },
            textStyle: {
              color: '#ffffff'
            }
          }
        ]
      }
      // 展示数据
      myChart.setOption(option)
    },
    reFlash() {
      socketsendgetfollowings()
      this.$store.state.accountdatas = []
      this.$store.state.transactiondatas = []
      this.$store.state.shareNET = []
      this.$store.state.shareTIME = []
      this.$store.state.dataTime = []
      this.$store.state.dataNet = []
      this.$store.state.dataNet1 = []
      this.$store.state.NET1 = []
      setTimeout(() => {
        console.log(this.$store.state.followtoken)
        console.log(
          '发送成功' + this.$store.state.followtoken[this.$store.state.INDEX]
        )
        socketsendshare1(this.$store.state.followtoken[this.$store.state.INDEX])
        // socketsendshare1('0e1bc0f47a54bdf8ccbc4d50b63c2d3b')
      }, 100)
    },
    getHQ1() {
      console.log('请求行情')
      websocket()
    },
    SUBsrcibe() {
      this.$store.state.arrexchange = []
      for (let i = 0; i < this.$store.state.transactiondatas.length; i++) {
        if (
          this.$store.state.transactiondatas[i].transaction.exchange === '深圳'
        ) {
          this.$store.state.arrexchange.push(
            '23123' + this.$store.state.transactiondatas[i].transaction.symbol
          )
        } else if (
          this.$store.state.transactiondatas[i].transaction.exchange === '上海'
        ) {
          this.$store.state.arrexchange.push(
            '18515' + this.$store.state.transactiondatas[i].transaction.symbol
          )
        }
      }
      // console.log(this.$store.state.arrexchange.join(','))
    }
  },
  // watch: {
  //   NewData: function() {
  //     setTimeout(() => {
  //       this.SUBsrcibe()
  //       this.getHQ1()
  //       this.flashMyChart()
  //       this.profit()
  //     }, 100)
  //   }
  // },
  mounted() {
    console.log(this.$store.state.INDEX)
    this.reFlash()
    this.show = false
    setTimeout(() => {
      this.flashMyChart()
      // console.log('123')
      this.profit()
      this.show = true
      console.log(this.$store.state.shareNET)
      console.log(this.$store.state.shareTIME)
    }, 800)
    // setTimeout(() => {
    //   this.show = true
    // }, 1000)
  }
}
</script>
<style Lang="less" scoped>
#main {
  width: 355px;
  height: 300px;
  margin: 0 20px 0 20px;
}
.box {
  background-color: #0e0c22;
}
.profit {
  display: flex;
  flex-direction: row;
  /* justify-content: center;
  margin-left: 20px; */
}
.profit_left,
.profit_right {
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: center;
}
.wp {
  color: #fff;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 16px;
  display: flex;
}
.briefIntroductionPhoto {
  width: 375px;
  height: auto;
}
.briefIntroduction {
  width: 100%;
  text-align: center;
  background-color: #0e0c22;
}
</style>
